<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.findname" placeholder="店铺名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="find">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd()">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>


    <!--列表-->
    <el-table :data="pageInfo" highlight-current-row  @selection-change="selsChange" style="width: 100%;">
      <!--      选框-->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <el-table-column type="index" width="60">
      </el-table-column>

      <!--      列表-->
      <!--      :formatter="formatStatus"-->
      <el-table-column prop="title" label="标题" width="120" sortable>
      </el-table-column>
      <el-table-column prop="content" label="公告内容" width="100" sortable>
        <template v-slot="scope">
          <span v-html="scope.row.content"/>
        </template>
      </el-table-column>
      <el-table-column prop="createUser" label="发布者" width="100" sortable>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="150" sortable>
      </el-table-column>
      <el-table-column prop="updateUser" label="修改者" width="150" sortable>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="150" sortable>
      </el-table-column>

      <el-table-column label="操作" width="245">
        <template v-slot="scope">
          <el-button type="warning" v-if="scope.row.state===1 || scope.row.state===4" size="small" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--批删和分页-->
    <!--    page-size:每页显示条目个数-->
    <!--    page-sizes:每页显示个数选项器-->
    <!--    :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemoveAnnouncement" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination
          @size-change="handleSizeChange"
          layout="total, sizes,prev, pager, next,jumper"
          @current-change="handleCurrentChange"

          :page-size="query.pageSize"
          :page-sizes="[5,10,15,20,30]"
          :total="pageInfo.total"
          :current-page="query.currentPage"
          style="float:right;">
      </el-pagination>
    </el-col>

    <!--****************************************************************************-->
    <!--*****************************新增和编辑界面***********************************-->
    <!--****************************************************************************-->
    <!--
    :visible.sync  控制dialog是否显示
     :rules  绑定表单校验规则
     prop:绑定校验规则的名称
   -->
    <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="announcementForm" label-width="80px" :rules="saveFormRules" ref="su"><!-- ref给表单取别名 -->
        <el-form-item label="标题" prop="name">
          <el-input v-model="announcementForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <!--          <el-input type="textarea" v-model="carForm.info"></el-input>-->
          <quill-editor v-model="announcementForm.content" :options="quilOption">
          </quill-editor>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import {batchRemoveDep, removeDep, getDepList, addDep, findEmployees, Announcementree} from "../../api/api";
import {quillEditor} from "vue-quill-editor";
import quillConfig from "../../common/js/quill-config";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  name: "Announcement",
  components:{
    quillEditor
  },
  // data为初始化页面值
  data() {
    return {
      quilOption:quillConfig,
      auditLoading:false,
      announcementForm:{
        id:null,
        title:null,
        content:null,
        token:null
      },
      /**
       * way=0驳回;way=1通过
       */
      auditForm:{
        note:"",
        way:0,
        announcementid:null
      },
      pageInfo: {
        // 总条数
        total: 0,
        rows: []
      },

      //初始化分页
      query: {
        //当前页码
        currentPage: 1,
        //每页显示条数
        pageSize: 10
      },
      /***************************************/

      //高级查询名字
      filters: {
        findname: ''
      },

      sels: [],//列表选中列，批删

      /***************************************************************/
      /******************初始化新增和编辑方法****************************/
      /***************************************************************/
      saveFormVisible: false,//新增界面是否显示
      auditFormVisible: false,
      saveLoading: false,
      options: [],
      title: "发布公告",
      auditTitle: "手动审核",


      // 显示新增
      //显示新增界面
      handleAdd() {
        this.saveFormVisible = true;
        this.announcementForm = {
              id:null,
              title:null,
              content:null,
              token:null
        }
      },
      //*******************************************************************
      //*******************************************************************
      //手动审核
      handleAudit(index,row){
        this.auditForm.announcementid = row.id
        this.auditFormVisible = true
      },

      //*******************************************************************
      //*******************************************************************
      //显示编辑界面,需要做数据回显
      //把row行中的数据拷贝到表单中去
      handleEdit(index, row) {
        Object.assign(this.saveForm, row)
        this.saveFormVisible = true;
        this.loadAnnouncementtree()
        //上级部门回显
        this.saveForm.parent = row.parent_id
      },

      /**************************************************************/
      /*****************************删除*********************************/
      /**************************************************************/
      //index:当前数据的行号
      //row:当前行数据
      handleDel(index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = {id: row.id}
          removeDep(para).then((res) => {
            this.listLoading = false
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getAnnouncement()
          });
        }).catch(() => {

        });
      },


      // **************************************************//
      // *********************批删*************************//
      // **************************************************//


      //批量删除
      batchRemoveAnnouncement: function () {
        //箭头函数相当于function函数简写
        //去掉function,改成箭头=>
        //形参小括号写到箭头左边
        var ids = this.sels.map(item => item.id).toString()
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          //NProgress.start();
          let para = {ids: ids}

          batchRemoveDep(para).then((res) => {

            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getAnnouncement()
          });
        }).catch(() => {

        });
      }
      // **************************************************
      // **************************************************
      // **************************************************
    }
  },


  methods: {
    //获取部门列表
    rejectOrPass() {
      this.auditLoading = true
      //封装数据
      let parm = {
        //this调用的是data里面的初始化数据
        note: this.auditForm.note,
        way: this.auditForm.way,
        announcementid:this.auditForm.announcementid
      }
      // this.$http.post("/dept",query)
      this.$http.post("/announcement/handaudit",parm).then(res => {
//res.data.data返回数据需要嵌套一层
        res = res.data

        //关闭加载
        this.auditLoading = false
        this.auditFormVisible = false
      }).catch(result => {
        this.$message({message: '手动审核失败', type: 'error'});
        // this.$message({
        //   message: res.data.msg,
        //   type: 'error'
        // });
      })
    },

    //驳回
    rejectSubmit(){
      this.auditForm.way = 1
      this.rejectOrPass()
    },
    //通过
    passSubmit(){
      this.auditForm.way = 2
      this.rejectOrPass()
    },


    //列表更改
    selsChange: function (sels) {
      this.sels = sels
    },


    //提交弹出框
    //$refs代表所有ref:取了别名的
    saveSubmit() {
      this.$refs.su.validate((valid) => {
        if (valid) {
          this.$confirm('确定提交么?', '提示', {}).then(() => {
            this.saveLoading = true
            this.announcementForm.token = localStorage.getItem("token")
            this.$http.put("/announcement",this.announcementForm).then((res) => {
              if (res.data.success) {
                this.$message({
                  message: '成功',
                  type: 'success'
                })
              } else {
                this.$message.error(res.data.msg)
              }
              this.getAnnouncement()
              this.saveLoading = false
              this.saveFormVisible = false
            })
          })
        }
      })
    },


    find() {
      this.query.currentPage = 1
      this.getAnnouncement()
    },

    //js方法
    //账号状态转换
    // formatStatus: function (row, column) {
    // 	return row.state == 1 ? '正常' : row.state == 0 ? '停用' : '未知';
    // },

    //当前页码改变时触发
    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage
      this.getAnnouncement()
    },

    //页码大小改变时触发(success)
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize
      this.getAnnouncement()
    },

    //获取店铺列表
    getAnnouncement() {
      this.listLoading = true
      //封装数据
      let query = {
        //this调用的是data里面的初始化数据
        currentPage: this.query.currentPage,
        pageSize: this.query.pageSize,
        content: this.filters.findname
      }
      this.$http.post("/announcement",query).then(res => {
        console.log(res)
        res = res.data.data
        this.pageInfo = res.data

        // 总数
        this.pageInfo.total = res.count
        //关闭加载
        this.listLoading = false
      }).catch(result => {
        this.$message({message: '分页查询失败', type: 'error'});
      })
    },

    //下拉框
    loadEmployees() {
      findEmployees().then((res) => {
        this.options = res.data

      })
    },
    //部门树
    loadAnnouncementtree(){
      Announcementree().then(res=>{
        this.AnnouncementTree = res.data
      })
    }


  },
  //页面加载时
  //要注意mounted位置
  mounted() {
    this.getAnnouncement()

  },

}
</script>

<style scoped>

</style>